
import tpl from './index.html';

export default {
    // 组件字模板
    template: tpl,
    // 外部传入数据
    propTypes: {
        // 0、组件默认对外双向绑定的数据，这里是grid的数据
        value: {
            type: 'array',
            value: ''
        },
        // 1、组件包裹层通用属性
        // 自定义class
        className: {
            type: 'string',
            value: ''
        },
        // 自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 组件禁用状态
        disabled: {
            type: function (value, props){
                // 只要写了这个属性，有没有值都认了
                return true;
            },
            value: false
        },
        // 2、更多自定义参数
        height: {
            type: function (value, props){
                return true;
            },
            value: false
        },
        // 视图类型：1列表/2卡片/3地图
        viewType: {
            type: 'numeric',
            value: 1
        },
        columns: {
            type: 'array',
            value: []
        }
    },
    // 内部数据
    data: function(){
        return {
            name: "组件名称",
            // 状态
            states: {
            
            },
            // 配置 
            opts: {
                
            },
            // 其他
            other: {

            }
        }
    },
    // 方法
    methods: {
        resizeTable: function(){
            var self = this;
            var columns = self.get('columns');
            var minW = 0;
            for(var i=0; i<columns.length; i++){
                minW = minW + parseInt(columns[i].width)
            }
            var $wrapW = $(self.$el).outerWidth();
            if($wrapW >= (minW + 40)){
                minW = '100%'
            }else {
                minW = minW + 40 + 'px'
            }
            self.set('totalWidth', minW)
        }
    },
    // 监听
    watchers: {
        "value": {
            watcher: function(newValue){
                
            },
            sync: true
        }
    },
    computed: {
        
    },
    afterMount: function(){
        this.resizeTable()
    }
};